<template>
    <div>
        <div>
            <!-- 充币记录 -->
            <div class="title">
                <div>{{$t('message.Financial')}}</div>
                <div @click="thedata" class="time">
                    {{$t('message.Orderdate')}}
                    <span>
                       
                    </span>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" :header-cell-style="{background:'#ccc'}">
                <el-table-column prop="createTime" :label="$t('message.time')" width="200"></el-table-column>
                <el-table-column prop="virtualWalletName" :label="$t('message.types')" width="200"></el-table-column>
                <el-table-column prop="recordName" :label="$t('message.type')" width="200"></el-table-column>
                <el-table-column :label="$t('message.number')" width="200">
                    <template slot-scope="scope">
                        <div v-if="scope.row.recordName=='OTC卖币出金'?false:true">
                            <span>{{scope.row.turnoverAmount}}</span>&nbsp;&nbsp;&nbsp;
                        <span style>{{scope.row.virtualWalletName}}</span>
                        </div>
                        <div v-else>
                            <span>-{{scope.row.turnoverAmount}}</span>&nbsp;&nbsp;&nbsp;
                        <span style>{{scope.row.virtualWalletName}}</span>
                        </div>
                        <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                    </template>
                </el-table-column>
                <!-- <el-table-column :label="$t('message.balance')">
                    <template slot-scope="scope">
                        <span>{{scope.row.postTradeBalance}}&nbsp;&nbsp;&nbsp;{{scope.row.virtualWalletName}}</span>
                    </template>
                </el-table-column>-->
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size="10"
                :total="total"
            ></el-pagination>

            <!-- 弹框 -->
            <div v-if="bounced" class="modal">
                <!-- 日期 -->
                <div>
                    {{$t('message.dateof')}}
                    <el-date-picker
                        v-model="value"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        :range-separator="$t('message.to')"
                        :start-placeholder="$t('message.Startdate')"
                        :end-placeholder="$t('message.Enddate')"
                    ></el-date-picker>
                </div>
                <div>
                    {{$t('message.types')}}
                    <el-select v-model="value1" placeholder>
                        <el-option
                            v-for="(item,index) in list"
                            :key="index"
                            :label="item.virtualWalletName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <!-- 交易类型 -->
                <div>
                    {{$t('message.Transactiontype')}}
                    <el-select style="margin-left:9px" v-model="value2" placeholder>
                        <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <!-- 清空筛选项 -->
                <div class="empty">
                    <span>{{$t('message.filter')}}</span>

                    <div class="cancel" @click="bounced=false">{{$t('message.cancel')}}</div>
                    <div class="determine" @click="init">{{$t('message.determine')}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import { financialRecord, virtualWalletList } from "../../api/api";
export default {
    data() {
        return {
            activeName: "first",
            input: "",
            unfold: false,
            bounced: false,
            value: "",
            value1: "",
            value2: "",
            value: "",
            tableData: [],
            page: 1,
            total: 0,
            rows: 10,
            type: "",
            startTime: "",
            endTime: "",
            list: []
        };
    },
    computed: {
        options() {
            var options = [
                {
                    value: "0",
                    label: this.$t("message.buy")
                },
                {
                    value: "1",
                    label: this.$t("message.sell")
                },
                {
                    value: "2",
                    label: this.$t("message.into")
                },
                {
                    value: "3",
                    label: this.$t("message.Roll")
                }
            ];
            return options;
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        handleCurrentChange(val) {
            console.log(val);
            this.page = val;
            this.init();
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 点击展开全部
        unwind() {
            this.unfold = !this.unfold;
        },
        // 弹框
        thedata() {
            this.bounced = !this.bounced;
        },

        init() {
            virtualWalletList().then(res => {
                // console.log(res.data);
                this.list = res.data.data;
            });
            console.log(this.value);
            let data = {
                token: JSON.parse(sessionStorage.getItem("token")),
                page: this.page,
                rows: this.rows,
                virtuaWalletId: this.value1,
                type: this.value2,
                startTime: this.value[0],
                endTime: this.value[1]
            };
            financialRecord(data).then(res => {
                if (res.data.code == 200) {
                    console.log(res.data);
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                } else {
                }
            });
        }
    },
    
};
</script>
<style lang="less" scoped>
.title {
    font-size: 18px;
    font-weight: 700;
    background: rgba(247, 247, 251, 1);
    line-height: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid #eee;
}
.top {
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
}
/deep/.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    background: rgba(255, 255, 255, 1);
    box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
}
/deep/.el-tabs__nav-wrap::after {
    box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
}
/deep/.el-tabs__nav {
    margin-left: 10px;
}
/deep/.el-tabs__item {
    // padding: 0 8px;
    font-size: 12px;
}
/deep/.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e7ed;
    z-index: 1;
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: #f7f7fb;
    border-color: #f7f7fb;
    cursor: not-allowed;
    border-radius: 10px;
}
/deep/.el-input--suffix .el-input__inner {
    border-radius: 10px;
}
/deep/.el-tabs__nav-wrap::after {
    box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
}
/deep/.el-tabs__nav {
    margin-left: 10px;
}
/deep/.el-tabs__item {
    // padding: 0 8px;
    font-size: 12px;
}
/deep/ .el-tabs__nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
}
/deep/.el-tabs__nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
    position: static;
}
/deep/.el-tabs__nav-wrap::after {
    height: 1px;
}
/deep/.el-input__inner {
    padding-right: 1px;
    height: 24px;
}
/deep/.el-select {
    display: inline-block;
    position: relative;
    width: 124px;
    height: 24px;
    margin-left: 30px;
}
/deep/.el-input--suffix .el-input__inner {
    padding-right: 22px;
    height: 24px;
}
/deep/.el-input__icon {
    line-height: 0px;
}
/deep/.el-popper {
    margin-bottom: 12px;
    z-index: 99999999;
}
/deep/.el-select-dropdown {
    position: absolute;
    z-index: 999999999;
}
/deep/.el-icon-time:before {
    content: "";
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 180px;
    margin-left: 29px;
}
/deep/.el-input--prefix .el-input__inner {
    padding-left: 15px;
}
/deep/.el-input__inner {
    font-size: 10px;
}
.queding {
    background: rgba(255, 255, 255, 1);
    margin-top: 10px;
    padding-bottom: 40px;
    .input {
        width: 34%;
        background: rgba(247, 247, 251, 1);
        border-radius: 10px;
    }
    ul li {
        font-size: 12px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-left: 50px;
        padding-top: 6px;
    }
    .moneey {
        display: flex;
        margin-left: 60px;
        margin-top: 10px;
        dl {
            width: 23px;
            background: #f7f7fb;
            border-radius: 5px;
            margin-left: 22px;
            font-size: 13px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: #999999;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            justify-content: center;
            height: 20px;
            padding: 0 12px;
        }
    }
    div:nth-child(1) {
        font-size: 14px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-left: 10px;
        margin-top: 15px;
    }
    .chongbi {
        font-size: 14px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-left: 10px;
        margin-top: 15px;
        .code img {
            width: 60px;
            height: 60px;
            margin-left: 50%;
        }
        span {
            font-size: 13px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(71, 142, 229, 1);
            margin-left: 12px;
        }
        .input {
            width: 34%;
            background: rgba(247, 247, 251, 1);
            border-radius: 10px;
            height: 40px !important ;
        }
        .line {
            width: 97%;
            height: 1px;
            background: rgba(244, 244, 244, 1);
            margin: 0 auto;
            margin-top: 20px;
        }
    }
}
.record {
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    .time {
        width: 130px;
        height: 25px;
        background: #ffffff;
        border: 1px solid #385376;
        border-radius: 10px;
        float: right;
        clear: both;
        position: relative;
        z-index: 99;
        top: 6px;
        font-size: 9px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: #999999;
        padding-left: 10px;
        line-height: 25px;

        span img {
            width: 9px;
            height: 9px;
            margin-left: 5px;
            margin-top: 2px;
        }
    }
    div:nth-child(1) {
        font-size: 20px;
        font-family: PingFang-SC-Medium;
        font-weight: 800;
        color: rgba(51, 51, 51, 1);
        line-height: 50px;
        margin-left: 10px;
    }
}
#time {
    background: rgba(255, 255, 255, 1);
    display: flex;
    .item {
        padding-left: 70px;
    }
    div {
        font-size: 13px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-left: 10px;
    }
}
.modal {
    padding: 10px;
    box-sizing: border-box;
    background: red;
    position: absolute;
    top: 60px;
    right: 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.1);
    > div {
        font-size: 10px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        margin-left: 6px;
        margin-top: 10px;
    }
    .empty {
        font-size: 10px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(71, 142, 229, 1);
        margin-top: 25px;
        display: flex;
        .determine {
            background: rgba(56, 83, 118, 1);
            border-radius: 2px;
            padding: 5px;
            padding-bottom: 2px;
            margin-left: 5px;
            font-size: 8px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
        .cancel {
            padding: 5px;
            font-size: 10px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-left: 60px;
        }
    }
}
</style>

